<template>
  <div>
    <TableBarVue
      addBtn="添加"
      @myAddBtn="addbtn"

    ></TableBarVue>

    <el-table
      :data="tableData"
      border
      style="width: 100%"
      class="table"
      v-loading="loading"
    >
      <el-table-column label="职位名称" prop="name"></el-table-column>
      <el-table-column label="职能描述" prop="description"></el-table-column>
      <el-table-column label="添加时间" prop="createTime"></el-table-column>
      <el-table-column label="是否启用" prop="isUsed">
        <template slot-scope="scope">
          <el-switch
            active-color="#13ce66"
            v-model="scope.row.isUsed"
            @change="stateChange(scope.row)"
            :disabled="disabled"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" prop="">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="
              $router.push({
                path: '/xitong-1/permission',
                query: { id: scope.row.id },
              })
            "
            >权限设置</el-button
          >
          <el-button type="text" @click="edit(scope.row)">编辑</el-button>
          <el-button type="text" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="clear tfoot">
      <el-pagination
        background
        layout="prev, pager, next,jumper"
        :total="total"
        style="float: right"
        :current-page="currPage"
        @current-change="handerPage"
      >
      </el-pagination>
    </div>

    <el-dialog
      title="添加职业"
      :visible.sync="dialogFormVisible"
      :destroy-on-close="true"
    >
      <el-form :model="form">
        <el-form-item label="职位名称" >
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述" >
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入描述"
            v-model="form.textarea"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TableBarVue from "../../../components/tablebar/TableBar.vue";
import {
  getPositionApi,
  delectApi,
  onChangeApi,
  addPositionApi,
  PositionUpdateApi,
  getPositionCount,
} from "@/http/priceApi/positionApi";
export default {
  data() {
    return {
      tableData: [],
      total: 0,
      dialogFormVisible: false,
      form: {
        name: "",
        textarea: "",
      },
      sort: "升序",
      currpage: 1,
      page: 10,
      disabled: false,
      publicID: "",
      loading: true,
    };
  },
  methods: {
    async init(currpage) {
      try {
        let data = await getPositionApi({ page: currpage });
        if (data.data.code != 200) throw new Error(data.data.msg);
        this.tableData = data.data.data;
        let count = await getPositionCount();
        if (data.data.code != 200) throw new Error(data.data.msg);
        this.loading = false;
        this.total = count.data.data;
      } catch (e) {
        console.log(e);
        this.loading = false;
        this.$message.error(e || "初始化失败");
      }
    },
    edit(row) {
      this.form.name = row.name;
      this.form.textarea = row.textarea;
      this.publicID = row.id;
      this.dialogFormVisible = true;
    },
    add() {
      let edit = async () => {
        try {
          let data = await PositionUpdateApi({
            createTim: `${new Date().toLocaleDateString()} ${new Date().toLocaleTimeString()}`,
            description: this.form.textarea || "",
            id: this.publicID,
            isUsed: true,
            name: this.form.name,
          });
          console.log(data);
          if (data.data.code != 200) throw new Error();
          this.$message.success("保存成功");
          this.init(this.currpage);
          this.dialogFormVisible = false;
        } catch (e) {
          this.dialogFormVisible = false;
          this.$message.error("保存失败");
        }
      };
      let addnew = async () => {
        try {
          let data = await addPositionApi({
            createTim: `${new Date().toLocaleDateString()} ${new Date().toLocaleTimeString()}`,
            description: this.form.textarea || "",
            id: this.publicID || "",
            isUsed: true,
            name: this.form.name,
          });
          console.log(data);
          if (data.data.code != 200) throw new Error();
          this.$message.success("保存成功");
          this.init(this.currpage);
          this.dialogFormVisible = false;
        } catch (e) {
          this.dialogFormVisible = false;
          this.$message.error("保存失败");
        }
      };
      if (this.publicID) {
        edit();
      } else {
        addnew();
      }
    },
    async del(id) {
      this.$confirm("确定删除该职位？", "提示", {
        type: "error",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(async () => {
          let data = await delectApi({ id });
          console.log(data);
          if (data.data.code != 200) throw new Error("删除数据失败");
          this.$message.error("删除成功");
          this.init(this.currpage);
        })
        .catch(() => {
          this.$message.error("删除失败");
        });
    },
    async stateChange(row) {
      this.disabled = true;
      let data = await onChangeApi({id:row.id,isUsed:row.isUsed});
      console.log(data);
      this.init(this.currpage);
      setTimeout(() => {
        this.disabled = false;
      }, 500);
    },
    addbtn() {
      this.form.name = "";
      this.form.textarea = "";
      this.publicID = "";
      this.dialogFormVisible = true;
    },
    handerPage(currpage) {
      this.init(currpage);
      this.currpage = currpage;
    },
  },
  created() {
    this.init(this.currpage);
  },
  components: {
    TableBarVue,
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/sass/pagination/page.scss";
</style>